const image = document.querySelector('.image');
const imglist = document.querySelector('.imglist');
const imgs = document.querySelectorAll('.imglist>img');
const spot = document.querySelector('.spot');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
let num =0;
let timer = null;
imgs[0].style.zIndex = 1;
next.onclick = ()=>{
    for(let i=0;i<imgs.length;i++){
        spot.children[i].className = '';
        imgs[i].style.zIndex = 0;
    }
    if(num >= imgs.length-1){
        num =-1;
    }
    num++;
    imgs[num].style.zIndex = 1;
    spot.children[num].className = 'bg'; 
    fadeIn(imgs[num],500);
}
prev.onclick =()=>{
    for(let i=0;i<imgs.length;i++){
        spot.children[i].className = '';
        imgs[i].style.zIndex = 0;
    }
    if(num <= 0){
        num =imgs.length;
    }
    num--;
    imgs[num].style.zIndex = 1;
    spot.children[num].className = 'bg';
    fadeIn(imgs[num],500);
}
for(let i=0;i<imgs.length;i++){
    const span = document.createElement('span');
    spot.appendChild(span);
    span.onclick = ()=>{
        for(let j = 0;j<spot.children.length;j++){
            spot.children[j].className = '';
            imgs[j].style.zIndex = 0;
        }
        num =i;
        spot.children[num].className = 'bg';
        imgs[num].style.zIndex = 1;
        fadeIn(imgs[num],500);
    }
    spot.children[0].className = 'bg';
}

function css(ele,attr,value){
    // 判断  如果第三个参数有 那就是设置  如果没有就是获取
    if(typeof value  ===  'undefined'){
        // 没有第三个参数 那这儿就是获取
        return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr] 
    }
    // 如果没有执行 if 判断 那就直接执行下面这段代码
    // 有第三个参数 设置
    ele.style[attr] = value

}


//倒计时
const spans = document.querySelectorAll('.time>span');

const newdate = new Date('2021/3/5/ 20:00:00');
fn()
setInterval(fn,1000);
function fn(){
    const date = new Date();
    const hm = parseInt((newdate.getTime()-date.getTime())/1000);
    const hours = parseInt(hm/3600%24);
    const fen = parseInt(hm/60%60);
    const miao = parseInt(hm%60);
    spans[0].innerHTML = ql(hours);
    spans[1].innerHTML = ql(fen);
    spans[2].innerHTML = ql(miao);
}
function ql(num){
    return num<10 ? num = '0' + num : num;
}


//秒杀区域轮播
const msul = document.querySelector('.carousel>ul');
const zyspans = document.querySelectorAll('.ms>.title>span');
const carousel = document.querySelector('.carousel');
const left = parseInt(window.getComputedStyle(msul)['left']);
zyspans[0].style.color = '#b0b0b0';
zyspans[1].style.color = '#e0e0e0';
let i = 0;
msul.onmouseover = function(){
    clearInterval(timer);
}
msul.onmouseout = function(){
    auto();
}
zyspans[0].onmouseover = function(){
    clearInterval(timer);
    if(i!==2){
        this.style.color = '#ef3a3b';
        this.style.cursor = 'pointer';
    }else{
        this.style.color = '#e0e0e0';
        this.style.cursor = '';
    }
}
zyspans[0].onmouseout = function(){
    auto();
    if(i!==2){
        this.style.color = '#b0b0b0';
    }else{
        this.style.color = '#e0e0e0';
    }
}
zyspans[1].onmouseover = function(){
    clearInterval(timer);
    if(i!==0){
        this.style.color = '#ef3a3b';
        this.style.cursor = 'pointer';
    }else{
        this.style.color = '#e0e0e0';
        this.style.cursor = '';
    }
}
zyspans[1].onmouseout = function(){
    auto();
    if(i!==0){
        this.style.color = '#b0b0b0';
    }else{
        this.style.color = '#e0e0e0';
    }
}
zyspans[0].onclick = function(){
    i++;
    zyspans[1].style.color = '#b0b0b0';
    if(i>=2){
        i=2;
        zyspans[1].style.color = '#b0b0b0';
        zyspans[0].style.color = '#e0e0e0';
    }
    animation(msul,-(carousel.offsetWidth+14)*i,'left',callback);
    var callback=function(){
        if(i>=2){
            i=2; 
        }
    }
}
zyspans[1].onclick = function(){
    i--;
    zyspans[0].style.color = '#b0b0b0';
    if(i<=0){
        i=0;
        zyspans[0].style.color = '#b0b0b0';
        zyspans[1].style.color = '#e0e0e0';
    }
    animation(msul,-(carousel.offsetWidth+14)*i,'left',callback);
    var callback=function(){
        if(i<=0){
            i=0; 
        }
    }
}
function animation(obj,target,loc,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var begin = parseInt(getStyle(obj,loc));
        var step = (target - begin)/10;
        step = step>0 ? Math.ceil(step) : Math.floor(step);
        var now = begin + step;
        if(now == target){
            clearInterval(obj.timer);
            callback && callback();
        }
        obj.style[loc] = now + 'px';
    },30)
    function getStyle(obj, loc){
        if(window.getComputedStyle){	
            return getComputedStyle(obj, null)[loc];
        }else{
            return obj.currentStyle[loc];
        }
    }
}
function auto(){
    timer = setInterval(function(){  
        i++;
        zyspans[1].style.color = '#b0b0b0';
        zyspans[0].style.color = '#b0b0b0';
        if(i>2){
            i=0;
            zyspans[1].style.color = '#e0e0e0';
        }
        animation(msul,-(carousel.offsetWidth+14)*i,'left',callback);
        var callback=function(){
            if(i>2){
                i=0; 
            }
        }
    },5000)
}
auto();

//秒杀区域上边框色
const color = ['#ffac13','#83c44e','#2196f3','#e53935','#00c0a5','#ffac13','#83c44e','#2196f3','#e53935','#00c0a5','#ffac13','#83c44e'];

const lis = document.querySelectorAll('.carousel>ul>li');

for(let j = 0;j<lis.length;j++){
    lis[j].style.borderColor = color[j];
}


//数据渲染
//手机部分
const phoneArr = [
    {
        url:'./images/phone1.png',
        p1:'小米11',
        p2:'骁龙888 | 2K四曲面屏',
        p3:'3999元起'
    },
    {
        url:'./images/phone2.png',
        p1:'Note 9 Pro ',
        p2:'一亿像素夜景相机，120Hz六档变速高刷屏',
        p3:'1599元起'
    },
    {
        url:'./images/phone3.png',
        p1:'Note 9',
        p2:'天玑 800U处理器，5000mAh电池，',
        p3:'1299元起'
    },
    {
        url:'./images/phone4.png',
        p1:'Note 9 4G',
        p2:'6000mAh长续航',
        p3:'999元起'
    },
    {
        url:'./images/phone5.png',
        p1:'小米10 至尊版',
        p2:'120X 变焦/120W秒充/120Hz屏幕',
        p3:'5299元起'
    },
    {
        url:'./images/phone6.png',
        p1:'Redmi K30S 至尊纪念版',
        p2:'144Hz[7档]变速高刷屏',
        p3:'2599元起'
    },
    {
        url:'./images/phone7.png',
        p1:'Redmi K30 至尊版',
        p2:'120Hz弹出全面屏，天玑1000+旗舰处理器',
        p3:'1999元起'
    },
    {
        url:'./images/phone8.png',
        p1:'腾讯黑鲨3S',
        p2:'骁龙865处理器，120Hz刷新率',
        p3:'3999元起'
    }
]

const phoneul = document.querySelector('.phone .allphone .two ul');
for(let j =0;j<phoneArr.length;j++){
    let li = document.createElement('li');
    li.innerHTML = `
    <a href="">
        <img src=${phoneArr[j].url} alt="">
        <p>${phoneArr[j].p1}</p>
        <p>${phoneArr[j].p2}</p>
        <p>${phoneArr[j].p3}</p>
    <a>
    `
    phoneul.appendChild(li);
}


//家电部分渲染
const jdArr = [
    {
        url:'./images/j1.png',
        p1:'小米全面屏电视65英寸 E65X',
        p2:'全面屏设计',
        p3:'2899元',
        span:'3099元'
    },
    {
        url:'./images/j2.png',
        p1:'全面屏电视E43K',
        p2:'全面屏设计，海量内容',
        p3:'1299元',
        span:'1399元'
    },
    {
        url:'./images/j3.png',
        p1:'小米电视4A 70英寸',
        p2:'大屏更享受',
        p3:'3299元',
        span:'3999元'
    },
    {
        url:'./images/j4.png',
        p1:'米家空调',
        p2:'出众静音，快速制冷热',
        p3:'1699元',
        span:'1799元'
    },
    {
        url:'./images/j5.png',
        p1:'米家互联网洗烘一体机 Pro 10kg',
        p2:'智能洗烘，省心省力',
        p3:'2899元',
        span:'3299元'
    },
    {
        url:'./images/j6.png',
        p1:'Redmi全自动波轮洗衣机1A 8kg',
        p2:'一键操作，父母都爱用',
        p3:'799元',
        span:'899元'
    },
    {
        url:'./images/j7.png',
        p1:'Air 13.3" 2019款',
        p2:'新一代独立显卡',
        p3:'4799元',
        span:'5399元'
    },
    {
        url:'./images/jx.png',
        h3:'米家互联网烟灶套装（天然气）',
        price:'2298元'
    },
    {
        span:'热门'
    }
]
const jdArr2 = [
    {
        url:'./images/yy1.png',
        p1:'全面屏电视E43K',
        p2:'全面屏设计，海量内容',
        p3:'1299元',
        span:'1399元'
    },
    {
        url:'./images/yy2.png',
        p1:'全面屏电视 55英寸E55X',
        p2:'潮流全面屏设计',
        p3:'2199',
        span:'2399元'
    },
    {
        url:'./images/yy3.png',
        p1:'小米电视4A 60英寸',
        p2:'人工智能语音系统,超高清画质',
        p3:'2499元',
        span:''
    },
    {
        url:'./images/yy4.png',
        p1:'小米电视4S 75英寸',
        p2:'4K HDR，人工智能语音',
        p3:'4399元',
        span:'5999元'
    },
    {
        url:'./images/yy5.png',
        p1:'小米全面屏电视65英寸 E65X',
        p2:'全面屏设计',
        p3:'2899元',
        span:'3099元'
    },
    {
        url:'./images/yy6.png',
        p1:'小米全面屏电视E32C',
        p2:'全面屏设计，人工智能系统',
        p3:'799元',
        span:'999元'
    },
    {
        url:'./images/yy7.png',
        p1:'Redmi智能电视A55',
        p2:'澎湃音效影院级体验',
        p3:'1999元',
        span:'2199元'
    },
    {
        url:'./images/yy8.png',
        h3:'Redmi 智能电视 MAX 98',
        price:'19999元'
    },
    {
        span:'电视影音'
    }
]
const jdul = document.querySelectorAll('.houseall .two ul');
const last = document.querySelectorAll('.houseall .two ul .last');
const rm = document.querySelector('.household .title .rm');
const yy = document.querySelector('.household .title .yy');

rm.style.color = '#ff6700';
    
    yy.onmouseover = function(){
        yy.style.color = '#ff6700';
        rm.style.color = '#424242';
        yy.style.borderBottomStyle = 'solid';
        rm.style.borderBottomStyle = 'none';
        jdul[1].style.display = 'block';
        jdul[0].style.display = 'none';
    }
    rm.onmouseover = function(){
        rm.style.color = '#ff6700';
        yy.style.color = '#424242';
        rm.style.borderBottomStyle = 'solid';
        yy.style.borderBottomStyle = 'none';
        jdul[0].style.display = 'block';
        jdul[1].style.display = 'none';
    }
    for(let j=0;j<jdArr.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${jdArr[j].url} alt="">
            <p>${jdArr[j].p1}</p>
            <p>${jdArr[j].p2}</p>
            <p>
                ${jdArr[j].p3}
                <span>${jdArr[j].span}</span>
            </p>
        <a>
        `
        jdul[0].insertBefore(li,last[0]);
    }
    last[0].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${jdArr[7].h3}</h3>
                    <img src=${jdArr[7].url} alt="">
                    <p class="price">${jdArr[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${jdArr[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `
    for(let j=0;j<jdArr2.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${jdArr2[j].url} alt="">
            <p>${jdArr2[j].p1}</p>
            <p>${jdArr2[j].p2}</p>
            <p>
                ${jdArr2[j].p3}
                <span>${jdArr2[j].span}</span>
            </p>
        <a>
        `
        jdul[1].insertBefore(li,last[1]);
    }
    last[1].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${jdArr2[7].h3}</h3>
                    <img src=${jdArr2[7].url} alt="">
                    <p class="price">${jdArr2[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${jdArr2[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `

    //智能区域
    const znArr1 = [
        {
            url:'./images/z1.png',
            p1:'小米小爱音箱 Play',
            p2:'听音乐、语音遥控家电',
            p3:'99元',
            span:'199元'
        },
        {
            url:'./images/z2.png',
            p1:'米家智能窗帘',
            p2:'窗帘开合随心控',
            p3:'799元',
            span:''
        },
        {
            url:'./images/z3.png',
            p1:'小米体脂秤2',
            p2:'轻松掌握身体脂肪率',
            p3:'99元',
            span:''
        },
        {
            url:'./images/z4.png',
            p1:'九号平衡车',
            p2:'年轻人的酷玩具',
            p3:'1999元',
            span:''
        },
        {
            url:'./images/z5.png',
            p1:'小米智能门锁 推拉式',
            p2:'一步推拉，高端智能门锁',
            p3:'1599元',
            span:'1699元'
        },
        {
            url:'./images/z6.png',
            p1:'Redmi小爱触屏音箱 8英寸',
            p2:'超大屏，让智能更多可能',
            p3:'349元',
            span:''
        },
        {
            url:'./images/z7.png',
            p1:'小米手环5',
            p2:'11种运动模式 磁吸式充电',
            p3:'179元',
            span:'189元'
        },
        {
            url:'./images/z8.png',
            h3:'米家空气净化器Pro',
            price:'1299元'
        },
        {
            span:'热门'
        }
    ]
    const znArr2 = [
        {
            url:'./images/a1.png',
            p1:'米家智能门锁 标准锁体 碳素黑',
            p2:'一体化活体指纹识别，多种开锁方式',
            p3:'1199元',
            span:'1299元'
        },
        {
            url:'./images/a2.png',
            p1:'米家智能门锁 标准锁体 磨砂金',
            p2:'全新磨砂金配色，精湛工艺升级',
            p3:'1199元',
            span:'1499元'
        },
        {
            url:'./images/a3.png',
            p1:'米家智能门锁 推拉式 通用版',
            p2:'一步推拉，高端智能门锁',
            p3:'1599元',
            span:'1699元'
        },
        {
            url:'./images/a4.png',
            p1:'米家智能门锁 青春版',
            p2:'隐形指纹识别设计 简单一步快进家门',
            p3:'899元',
            span:'999元'
        },
        {
            url:'./images/a5.png',
            p1:'米家智能门锁 霸王锁体 碳素黑',
            p2:'一体化活体指纹识别，多种开锁方式',
            p3:'1399元',
            span:'1599元'
        },
        {
            url:'./images/a6.png',
            p1:'米家智能门锁 霸王锁体 磨砂金',
            p2:'适配霸王锁体，多种开锁方式',
            p3:'1399元',
            span:'1799元'
        },
        {
            span:'安防'
        }
    ]
    const znArr3 = [
        {
            url:'./images/c1.png',
            p1:'米兔折叠婴儿推车',
            p2:'出发去向往的地方',
            p3:'699元',
            span:''
        },
        {
            url:'./images/c2.png',
            p1:'九号平衡车 Plus',
            p2:'一个形影不离的新伙伴',
            p3:'3299元',
            span:'3499元'
        },
        {
            url:'./images/c3.png',
            p1:'米家充气宝',
            p2:'便携电动打气筒',
            p3:'199元',
            span:''
        },
        {
            url:'./images/c4.png',
            p1:'小米小背包',
            p2:'城市休闲，简约设计',
            p3:'29元',
            span:''
        },
        {
            url:'./images/c5.png',
            p1:'骑记电动助力自行车 新国标版 黑色',
            p2:'更多助力选择，更多城市风景',
            p3:'2999元',
            span:''
        },
        {
            url:'./images/c6.png',
            p1:'小米米家对讲机2',
            p2:'向更远出发',
            p3:'449元',
            span:''
        },
        {
            url:'./images/c7.png',
            p1:'九号平衡车',
            p2:'年轻人的酷玩具',
            p3:'1999元',
            span:''
        },
        {
            url:'./images/c8.png',
            h3:'米家电动滑板车1S',
            price:'1999元'
        },
        {
            span:'出行'
        }
    ]
    const znul = document.querySelectorAll('.intellect .two ul');
    const last2 = document.querySelectorAll('.intellect .two ul .last');
    const znrm = document.querySelector('.intellect .title .rm');
    const af = document.querySelector('.intellect .title .af');
    const cx = document.querySelector('.intellect .title .cx');
    

    znrm.style.color = '#ff6700';
    
    znrm.onmouseover = function(){
        znrm.style.color = '#ff6700';
        af.style.color = '#424242';
        cx.style.color = '#424242';
        znrm.style.borderBottomStyle = 'solid';
        af.style.borderBottomStyle = 'none';
        cx.style.borderBottomStyle = 'none';
        znul[0].style.display = 'block';
        znul[1].style.display = 'none';
        znul[2].style.display = 'none';
    }
    af.onmouseover = function(){
        af.style.color = '#ff6700';
        znrm.style.color = '#424242';
        cx.style.color = '#424242';
        af.style.borderBottomStyle = 'solid';
        znrm.style.borderBottomStyle = 'none';
        cx.style.borderBottomStyle = 'none';
        znul[1].style.display = 'block';
        znul[0].style.display = 'none';
        znul[2].style.display = 'none';
    }
    cx.onmouseover = function(){
        cx.style.color = '#ff6700';
        znrm.style.color = '#424242';
        af.style.color = '#424242';
        cx.style.borderBottomStyle = 'solid';
        znrm.style.borderBottomStyle = 'none';
        af.style.borderBottomStyle = 'none';
        znul[2].style.display = 'block';
        znul[0].style.display = 'none';
        znul[1].style.display = 'none';
    }

    for(let j=0;j<znArr1.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${znArr1[j].url} alt="">
            <p>${znArr1[j].p1}</p>
            <p>${znArr1[j].p2}</p>
            <p>
                ${znArr1[j].p3}
                <span>${znArr1[j].span}</span>
            </p>
        <a>
        `
        znul[0].insertBefore(li,last2[0]);
    }
    last2[0].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${znArr1[7].h3}</h3>
                    <img src=${znArr1[7].url} alt="">
                    <p class="price">${znArr1[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${znArr1[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `

    for(let j=0;j<znArr2.length-1;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${znArr2[j].url} alt="">
            <p>${znArr2[j].p1}</p>
            <p>${znArr2[j].p2}</p>
            <p>
                ${znArr2[j].p3}
                <span>${znArr2[j].span}</span>
            </p>
        <a>
        `
        znul[1].insertBefore(li,last2[1]);
    }
    last2[1].innerHTML = `
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${znArr2[6].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `

    for(let j=0;j<znArr3.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${znArr3[j].url} alt="">
            <p>${znArr3[j].p1}</p>
            <p>${znArr3[j].p2}</p>
            <p>
                ${znArr3[j].p3}
                <span>${znArr3[j].span}</span>
            </p>
        <a>
        `
        znul[2].insertBefore(li,last2[2]);
    }
    last2[2].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${znArr3[7].h3}</h3>
                    <img src=${znArr3[7].url} alt="">
                    <p class="price">${znArr3[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${znArr3[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `


    //搭配部分渲染
    const dpArr = [
        {
            url:'./images/r1.png',
            p1:'小米真无线蓝牙耳机Air 2 Pro',
            p2:'主动降噪/持久续航/无线充',
            p3:'699元',
            span:''
        },
        {
            url:'./images/r2.png',
            p1:'高速无线充套装',
            p2:'快速无线闪充，Qi充电标准',
            p3:'149元',
            span:''
        },
        {
            url:'./images/r3.png',
            p1:'Redmi AirDots 2真无线蓝牙耳机',
            p2:'支持蓝牙5.0，自动秒连，拿起就能用',
            p3:'99元',
            span:''
        },
        {
            url:'./images/r4.png',
            p1:'小米真无线蓝牙耳机Air 2s',
            p2:'全面升级，智慧真无线',
            p3:'399元',
            span:''
        },
        {
            url:'./images/r5.png',
            p1:'Redmi充电宝 10000mAh 标准版 白色',
            p2:'10000mAh大电量 ',
            p3:'59元',
            span:''
        },
        {
            url:'./images/r6.png',
            p1:'Redmi充电宝 20000mAh 快充版',
            p2:'大容量，可上飞机 ',
            p3:'99元',
            span:''
        },
        {
            url:'./images/z7.jpg',
            p1:'小米插线板 5孔位',
            p2:'多重安全保护',
            p3:'39元',
            span:''
        },
        {
            url:'./images/r8.png',
            h3:'小米蓝牙耳机AirDots青春版',
            price:'169元'
        },
        {
            span:'热门'
        }
    ]
    const dpArr2 = [
        {
            url:'./images/e1.png',
            p1:'Redmi AirDots 2真无线蓝牙耳机',
            p2:'支持蓝牙5.0，自动秒连，拿起就能用',
            p3:'99元',
            span:''
        },
        {
            url:'./images/e2.png',
            p1:'小米真无线蓝牙耳机Air 2s',
            p2:'全面升级，智慧真无线',
            p3:'399元',
            span:''
        },
        {
            url:'./images/e3.png',
            p1:'小米降噪项圈蓝牙耳机',
            p2:'无线降噪，静无止境',
            p3:'399元',
            span:'499元'
        },
        {
            url:'./images/e4.png',
            p1:'小米小爱音箱 Pro',
            p2:'语音遥控5000+品牌主流家电',
            p3:'299元',
            span:''
        },
        {
            url:'./images/e5.png',
            p1:'小米小爱音箱 Art 电池版',
            p2:'不插电，让音乐更自由',
            p3:'399元',
            span:''
        },
        {
            url:'./images/e6.png',
            p1:'小米小爱音箱 Art',
            p2:'极光下的声音艺术',
            p3:'349元',
            span:''
        },
        {
            url:'./images/e7.png',
            p1:'小米小爱音箱',
            p2:'全面升级 旗舰音质',
            p3:'249元',
            span:'269元'
        },
        {
            url:'./images/e8.jpg',
            h3:'小米AI音箱',
            price:'199元'
        },
        {
            span:'耳机音箱'
        }
    ]
    const dpul = document.querySelectorAll('.collall .two ul');
    const last3 = document.querySelectorAll('.collall .two ul .last');
    const dprm = document.querySelector('.collocation .title .rm');
    const ej = document.querySelector('.collocation .title .ej');
    
    dprm.style.color = '#ff6700';
        
        ej.onmouseover = function(){
            ej.style.color = '#ff6700';
            dprm.style.color = '#424242';
            ej.style.borderBottomStyle = 'solid';
            dprm.style.borderBottomStyle = 'none';
            dpul[1].style.display = 'block';
            dpul[0].style.display = 'none';
        }
        dprm.onmouseover = function(){
            dprm.style.color = '#ff6700';
            ej.style.color = '#424242';
            dprm.style.borderBottomStyle = 'solid';
            ej.style.borderBottomStyle = 'none';
            dpul[0].style.display = 'block';
            dpul[1].style.display = 'none';
        }
        for(let j=0;j<dpArr.length-2;j++){
            let li = document.createElement('li');
            li.innerHTML = `
            <a href="">
                <img src=${dpArr[j].url} alt="">
                <p>${dpArr[j].p1}</p>
                <p>${dpArr[j].p2}</p>
                <p>
                    ${dpArr[j].p3}
                    <span>${dpArr[j].span}</span>
                </p>
            <a>
            `
            dpul[0].insertBefore(li,last3[0]);
        }
        last3[0].innerHTML = `
                <div class="ts">
                    <a href="">
                        <h3>${dpArr[7].h3}</h3>
                        <img src=${dpArr[7].url} alt="">
                        <p class="price">${dpArr[7].price}</p>
                    </a>
                </div>
                <div class="ts1">
                    <a href="">
                        <p>浏览更多<span>${dpArr[8].span}</span></p>
                        <i class="rm iconfont icon-icon-test"></i>
                    </a>
                </div>
        `
        for(let j=0;j<dpArr2.length-2;j++){
            let li = document.createElement('li');
            li.innerHTML = `
            <a href="">
                <img src=${dpArr2[j].url} alt="">
                <p>${dpArr2[j].p1}</p>
                <p>${dpArr2[j].p2}</p>
                <p>
                    ${dpArr2[j].p3}
                    <span>${dpArr2[j].span}</span>
                </p>
            <a>
            `
            dpul[1].insertBefore(li,last3[1]);
        }
        last3[1].innerHTML = `
                <div class="ts">
                    <a href="">
                        <h3>${dpArr2[7].h3}</h3>
                        <img src=${dpArr2[7].url} alt="">
                        <p class="price">${dpArr2[7].price}</p>
                    </a>
                </div>
                <div class="ts1">
                    <a href="">
                        <p>浏览更多<span>${dpArr2[8].span}</span></p>
                        <i class="rm iconfont icon-icon-test"></i>
                    </a>
                </div>
        `

        //配件部分渲染
            const pjArr = [
                {
                    url:'./images/p1.png',
                    p1:'小米氮化镓GaN充电器 Type-C 65W',
                    p2:'氮化镓黑科技 65W MAX 大功率快充',
                    p3:'149元',
                    span:''
                },
                {
                    url:'./images/p2.png',
                    p1:'高速无线充套装',
                    p2:'快速无线闪充，Qi充电标准',
                    p3:'149元',
                    span:''
                },
                {
                    url:'./images/p3.png',
                    p1:'小米无线充电宝青春版10000mAh',
                    p2:'能量满满，无线有线都能充',
                    p3:'129元',
                    span:''
                },
                {
                    url:'./images/p4.png',
                    p1:'小米车载充电器快充版',
                    p2:'双口快充，安全稳定',
                    p3:'69元',
                    span:''
                },
                {
                    url:'./images/p5.png',
                    p1:'小米USB充电器65W 快充版（2A1C）',
                    p2:'超级快充，三台设备同时充',
                    p3:'149元',
                    span:''
                },
                {
                    url:'./images/p6.png',
                    p1:'小米Type-C转Lightning数据线 1m',
                    p2:'苹果MFi官方认证，支持快充',
                    p3:'59元',
                    span:''
                },
                {
                    url:'./images/p7.png',
                    p1:'小米车载充电器快充版1A1C 100W',
                    p2:'小米车载充电器快充版1A1C 100W',
                    p3:'99元',
                    span:''
                },
                {
                    url:'./images/p8.png',
                    h3:'小米氮化镓GaN充电器 Type-C 65W ',
                    price:'149元'
                },
                {
                    span:'热门'
                }
            ]
            const pjArr2 = [
                {
                    url:'./images/cd1.png',
                    p1:'小米氮化镓GaN充电器 Type-C 65W ',
                    p2:'氮化镓黑科技 65W MAX 大功率快充',
                    p3:'149元',
                    span:''
                },
                {
                    url:'./images/cd2.png',
                    p1:'小米立式风冷无线充 30W ',
                    p2:'解锁充电新姿势',
                    p3:'199元',
                    span:''
                },
                {
                    url:'./images/cd3.png',
                    p1:'小米立式无线充电器 通用快充20W',
                    p2:'横竖可充，迅速感应边充边玩',
                    p3:'99元',
                    span:''
                },
                {
                    url:'./images/cd4.png',
                    p1:'米家智能插座蓝牙网关版',
                    p2:'让传统家电变智能',
                    p3:'79元',
                    span:''
                },
                {
                    url:'./images/cd5.png',
                    p1:'米家插线板6位基础版（含3口USB 2A快充）',
                    p2:'小巧设计，便捷不占地儿',
                    p3:'79元',
                    span:''
                },
                {
                    url:'./images/cd6.png',
                    p1:'小米插线板（含3口USB 2A快充）',
                    p2:'3个USB充电口，支持快充',
                    p3:'49元',
                    span:''
                },
                {
                    url:'./images/cd7.png',
                    p1:'小米USB充电器65W 快充版（2A1C）',
                    p2:'超级快充，三台设备同时充',
                    p3:'149元',
                    span:''
                },
                {
                    url:'./images/cd8.png',
                    h3:'小米Type-C充电器快充版 20W',
                    price:'39元'
                },
                {
                    span:'充电器'
                }
            ]
            const pjul = document.querySelectorAll('.partsall .two ul');
            const last4 = document.querySelectorAll('.partsall .two ul .last');
            const pjrm = document.querySelector('.parts .title .rm');
            const cd = document.querySelector('.parts .title .cd');
            
            pjrm.style.color = '#ff6700';
                
                cd.onmouseover = function(){
                    cd.style.color = '#ff6700';
                    pjrm.style.color = '#424242';
                    cd.style.borderBottomStyle = 'solid';
                    pjrm.style.borderBottomStyle = 'none';
                    pjul[1].style.display = 'block';
                    pjul[0].style.display = 'none';
                }
                pjrm.onmouseover = function(){
                    pjrm.style.color = '#ff6700';
                    cd.style.color = '#424242';
                    pjrm.style.borderBottomStyle = 'solid';
                    cd.style.borderBottomStyle = 'none';
                    pjul[0].style.display = 'block';
                    pjul[1].style.display = 'none';
                }
                for(let j=0;j<pjArr.length-2;j++){
                    let li = document.createElement('li');
                    li.innerHTML = `
                    <a href="">
                        <img src=${pjArr[j].url} alt="">
                        <p>${pjArr[j].p1}</p>
                        <p>${pjArr[j].p2}</p>
                        <p>
                            ${pjArr[j].p3}
                            <span>${pjArr[j].span}</span>
                        </p>
                    <a>
                    `
                    pjul[0].insertBefore(li,last4[0]);
                }
                last4[0].innerHTML = `
                        <div class="ts">
                            <a href="">
                                <h3>${pjArr[7].h3}</h3>
                                <img src=${pjArr[7].url} alt="">
                                <p class="price">${pjArr[7].price}</p>
                            </a>
                        </div>
                        <div class="ts1">
                            <a href="">
                                <p>浏览更多<span>${pjArr[8].span}</span></p>
                                <i class="rm iconfont icon-icon-test"></i>
                            </a>
                        </div>
                `
                for(let j=0;j<dpArr2.length-2;j++){
                    let li = document.createElement('li');
                    li.innerHTML = `
                    <a href="">
                        <img src=${pjArr2[j].url} alt="">
                        <p>${pjArr2[j].p1}</p>
                        <p>${pjArr2[j].p2}</p>
                        <p>
                            ${pjArr2[j].p3}
                            <span>${pjArr2[j].span}</span>
                        </p>
                    <a>
                    `
                    pjul[1].insertBefore(li,last4[1]);
                }
                last4[1].innerHTML = `
                        <div class="ts">
                            <a href="">
                                <h3>${pjArr2[7].h3}</h3>
                                <img src=${pjArr2[7].url} alt="">
                                <p class="price">${pjArr2[7].price}</p>
                            </a>
                        </div>
                        <div class="ts1">
                            <a href="">
                                <p>浏览更多<span>${pjArr2[8].span}</span></p>
                                <i class="rm iconfont icon-icon-test"></i>
                            </a>
                        </div>
                `

//周边部分渲染
const zbArr = [
    {
        url:'./images/l1.png',
        p1:'米家飞行员太阳镜 Pro',
        p2:'尼龙偏光，轻巧佩戴',
        p3:'199元',
        span:''
    },
    {
        url:'./images/l2.png',
        p1:'小米巨能写中性笔10支装',
        p2:'一支顶4支，超长顺滑书写',
        p3:'9.99元',
        span:''
    },
    {
        url:'./images/l3.png',
        p1:'米家迷你保温杯',
        p2:'可以随身携带的温度',
        p3:'49元',
        span:''
    },
    {
        url:'./images/l4.png',
        p1:'贝医生巴氏牙刷 四色装',
        p2:'进口刷毛，好品质',
        p3:'39.9元',
        span:''
    },
    {
        url:'./images/l5.png',
        p1:'米家运动鞋4',
        p2:'轻盈若絮,弹若脱兔',
        p3:'199元',
        span:''
    },
    {
        url:'./images/l6.png',
        p1:'米家指甲刀五件套',
        p2:'轻巧多用，优雅随行',
        p3:'39.9元',
        span:''
    },
    {
        url:'./images/l7.png',
        p1:'8H乳胶床垫2',
        p2:'软硬双面可睡',
        p3:'499元',
        span:'599元'
    },
    {
        url:'./images/l8.png',
        h3:'MIJOY 唱片机车载香薰',
        price:'49元'
    },
    {
        span:'热门'
    }
]
const zbArr2 = [
    {
        url:'./images/x1.png',
        p1:'九号卡丁车Pro兰博基尼汽车定制版',
        p2:'九号卡丁车Pro兰博基尼汽车定制版',
        p3:'9999元',
        span:''
    },
    {
        url:'./images/x2.png',
        p1:'米家飞行员太阳镜 Pro',
        p2:'尼龙偏光，轻巧佩戴',
        p3:'199元',
        span:''
    },
    {
        url:'./images/x3.png',
        p1:'九号平衡车',
        p2:'年轻人的酷玩具',
        p3:'1999元',
        span:''
    },
    {
        url:'./images/x4.png',
        p1:'小米米家电动滑板车Pro',
        p2:'性能提升，动力更强劲',
        p3:'2799元',
        span:''
    },
    {
        url:'./images/x5.png',
        p1:'米家经典方框太阳镜',
        p2:'复古设计，偏光自修复',
        p3:'99元',
        span:''
    },
    {
        url:'./images/x6.png',
        p1:'小米车载充电器快充版1A1C 100W',
        p2:'小米车载充电器快充版1A1C 100W',
        p3:'99元',
        span:''
    },
    {
        url:'./images/x7.png',
        p1:'小米对讲机Lite',
        p2:'小米对讲机Lite',
        p3:'129元',
        span:''
    },
    {
        url:'./images/x8.png',
        h3:'小米无线充电宝30W 10000mAh',
        price:'199元'
    },
    {
        span:'出行'
    }
]
const zbul = document.querySelectorAll('.perall .two ul');
const last5 = document.querySelectorAll('.perall .two ul .last');
const zbrm = document.querySelector('.periphery .title .rm');
const cx2 = document.querySelector('.periphery .title .cx2');

zbrm.style.color = '#ff6700';
    
    cx2.onmouseover = function(){
        cx2.style.color = '#ff6700';
        zbrm.style.color = '#424242';
        cx2.style.borderBottomStyle = 'solid';
        zbrm.style.borderBottomStyle = 'none';
        zbul[1].style.display = 'block';
        zbul[0].style.display = 'none';
    }
    zbrm.onmouseover = function(){
        zbrm.style.color = '#ff6700';
        cx2.style.color = '#424242';
        zbrm.style.borderBottomStyle = 'solid';
        cx2.style.borderBottomStyle = 'none';
        zbul[0].style.display = 'block';
        zbul[1].style.display = 'none';
    }
    for(let j=0;j<zbArr.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${zbArr[j].url} alt="">
            <p>${zbArr[j].p1}</p>
            <p>${zbArr[j].p2}</p>
            <p>
                ${zbArr[j].p3}
                <span>${zbArr[j].span}</span>
            </p>
        <a>
        `
        zbul[0].insertBefore(li,last5[0]);
    }
    last5[0].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${zbArr[7].h3}</h3>
                    <img src=${zbArr[7].url} alt="">
                    <p class="price">${zbArr[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${zbArr[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `
    for(let j=0;j<dpArr2.length-2;j++){
        let li = document.createElement('li');
        li.innerHTML = `
        <a href="">
            <img src=${zbArr2[j].url} alt="">
            <p>${zbArr2[j].p1}</p>
            <p>${zbArr2[j].p2}</p>
            <p>
                ${zbArr2[j].p3}
                <span>${zbArr2[j].span}</span>
            </p>
        <a>
        `
        zbul[1].insertBefore(li,last5[1]);
    }
    last5[1].innerHTML = `
            <div class="ts">
                <a href="">
                    <h3>${zbArr2[7].h3}</h3>
                    <img src=${zbArr2[7].url} alt="">
                    <p class="price">${zbArr2[7].price}</p>
                </a>
            </div>
            <div class="ts1">
                <a href="">
                    <p>浏览更多<span>${zbArr2[8].span}</span></p>
                    <i class="rm iconfont icon-icon-test"></i>
                </a>
            </div>
    `